<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>尚优选</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <!-- 最外层居中包裹框 -->
  <div id="wrapper">

    <!-- 设置头部 -->
    <header id="header">

      <!-- 上边登陆部分 -->
      <div class="headTop">

        <!-- 设施版心元素 -->
        <div class="headTopMain">

          <!-- 左侧部分 -->
          <div class="left">
            <!-- 欢迎 -->
            <h5>欢迎来到尚优选！ 请</h5>
            <!-- 登录 -->
            <span>
              <a href="#">登录</a>
              <a href="#">注册</a>
            </span>
          </div>

          <!-- 右边部分 -->
          <div class="right">
            <ul>
              <li><a href="#">我的订单</a></li>
              <li><a href="#">我的购物车</a></li>
              <li><a href="#">我的尚优选</a></li>
              <li><a href="#">尚优选会员</a></li>
              <li><a href="#">企业采购</a></li>
              <li><a href="#">关注尚优选</a></li>
              <li><a href="#">合作招商</a></li>
              <li><a href="#">商家后台</a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- input搜索框 -->
      <div class="headBottom">

        <!-- 设置版心 -->
        <div class="headBottomMain">

          <!-- 设置logo -->
          <div class="logo">
            <a href="#">
              <img src="./images/logo.png" alt="这是logo">
            </a>
          </div>

          <!-- 设置搜索框 -->
          <div class="search">
            <input type="text" placeholder="请输入搜索内容">
            <input type="button" value="搜索">
          </div>
        </div>
      </div>
    </header>

    <!-- 分类导航 -->
    <div id="navWrap">
      <!-- 设置版心 -->
      <div class="navWrapMain">
        <a href="javascript:;">全部商品分类</a>
        <a href="javascript:;">服装城</a>
        <a href="javascript:;">美妆馆</a>
        <a href="javascript:;">尚优选超市</a>
        <a href="javascript:;">全球购</a>
        <a href="javascript:;">闪购</a>
        <a href="javascript:;">团购</a>
        <a href="javascript:;">有趣</a>
        <a href="javascript:;">秒杀</a>
      </div>
    </div>

    <!-- 内容区域 -->
    <div id="content">
      <!-- 版心 -->
      <div class="contentMain">
        <!-- 路径导航 -->
        <div id="navPath"></div>

        <!-- 中间区域 -->
        <div class="center">

          <!-- 左边放大镜 -->
          <div class="left">
            <!-- 上边图片 -->
            <div class="leftTop">
              <!-- 小图 -->
              <div class="smallPic">
                <!-- 小图片 -->
                <img src="./images/s1.png" alt="">
                <!-- 蒙版元素 -->
                <div class="mask"></div>
              </div>
              <!-- 大图 -->
              <div class="bigPic">
                <img src="./images/b1.png" alt="">
              </div>
            </div>
            <!-- 下边缩略图 -->
            <div class="leftBottom">
              <a href="#" class="prev">&lt;</a>
              <div class="picList">
                <ul></ul>
              </div>
              <a href="#" class="next">&gt;</a>
            </div>
          </div>

          <!-- 右边信息详情 -->
          <div class="right">

            <!-- 上半部分商品详情 -->
            <div class="rightTop">
              <!-- 标题 -->
              <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机bbb123</h3>
              <!-- 简介 -->
              <p>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
              <!-- 价格块 -->
              <div class="priceWrap">
                <!-- 价格 -->
                <div class="priceTop">
                  <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                  <div class="price">
                    <span>￥</span>
                    <p>5299</p>
                    <i>降价通知</i>
                  </div>
                  <p>
                    <span>累计评价</span>
                    <span class="pingLun">670000</span>
                  </p>
                </div>
                <!-- 促销 -->
                <div class="priceBottom">
                  <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                  <p>
                    <span class="aaa">加价购</span>
                    <span class="bbb"> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</span>
                  </p>
                </div>
              </div>
              <!-- 支持 -->
              <div class="support">
                <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                <p>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
                <!-- 配送至 -->
                <div class="address">
                  <span>配&nbsp;送&nbsp;至</span>
                  <p>广东省 深圳市 宝安区</p>
                </div>
              </div>

            </div>

            <!-- 下半部分商品参数 -->
            <div class="rightBottom">
              <!-- 选择之后的面包屑区域 -->
              <div class="choose"></div>

              <!-- 商品参数的选择区域 -->
              <div class="chooseWrap"></div>

              <!-- 加入购物车 -->
              <div class="addCart">
                <div class="count">
                  <input type="text">
                  <a href="javascript:;">+</a>
                  <a href="javascript:;">-</a>
                </div>
                <button>加入购物车</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 商品详情中间 -->
        <div class="goodsDetailWrap">
          <!-- 左侧侧边栏部分 -->
          <aside class="leftAside">
            <!-- 上边选项卡 -->
            <div class="asideTop">
              <h4 class="active">相关分类</h4>
              <h4>推荐品牌</h4>
            </div>
            <!-- 下边内容区域 -->
            <div class="asideBottom">
              <div class="active">
                <ul class="goodslist1">
                  <li>手机</li>
                  <li>手机壳</li>
                  <li>内存卡</li>
                  <li>iphone配件</li>
                  <li>贴膜</li>
                  <li>手机耳机</li>
                  <li>移动电源</li>
                  <li>平板电脑</li>
                </ul>
                <ul class="goodslist2">
                  <li>
                    <img src="images/part01.png" alt="">
                    <span>Apple苹果iPhone 6s (A1699)</span>
                    <p>¥6088.00</p>
                    <div class="button">
                      <a href="javascript:;">加入购物车</a>
                    </div>
                  </li>
                  <li>
                    <img src="images/part01.png" alt="">
                    <span>Apple苹果iPhone 6s (A1699)</span>
                    <p>¥6088.00</p>
                    <div class="button">
                      <a href="javascript:;">加入购物车</a>
                    </div>
                  </li>
                  <li>
                    <img src="images/part01.png" alt="">
                    <span>Apple苹果iPhone 6s (A1699)</span>
                    <p>¥6088.00</p>
                    <div class="button">
                      <a href="javascript:;">加入购物车</a>
                    </div>
                  </li>
                  <li>
                    <img src="images/part01.png" alt="">
                    <span>Apple苹果iPhone 6s (A1699)</span>
                    <p>¥6088.00</p>
                    <div class="button">
                      <a href="javascript:;">加入购物车</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div>
                推荐品牌内容
              </div>
            </div>
          </aside>

          <!-- 右侧部分 -->
          <div class="rightDetail">
            <!--选择搭配开始-->
            <div class="chooseBox">
              <!--标题-->
              <h4>选择搭配</h4>
              <!--内容-->
              <div class="listWrap">
                <!--左边-->
                <div class="left">
                  <img src="images/l-m01.png" alt="">
                  <p>¥5299</p>
                  <i>+</i>
                </div>
                <!--中间-->
                <ul class="middle">
                  <li>
                    <img src="images/dp01.png" alt="">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox" value="50">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="images/dp02.png" alt="">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox" value="50">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="images/dp03.png" alt="">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox" value="50">
                      <span>50</span>
                    </div>
                  </li>
                  <li>
                    <img src="images/dp04.png" alt="">
                    <span>Feless费勒斯VR</span>
                    <div>
                      <input type="checkbox" value="50">
                      <span>50</span>
                    </div>
                  </li>
                </ul>

                <!--右侧-->
                <div class="right">
                  <div>已购0件商品</div>
                  <p>套餐价</p>
                  <i>¥5299</i>
                  <div>
                    <button>加入购物车</button>
                  </div>
                </div>
              </div>
            </div>

            <!--选项卡开始-->
            <div class="BottomDetail">
              <!--菜单-->
              <ul class="tabBtns">
                <li class="active"><a href="javascript:;">商品介绍</a></li>
                <li><a href="javascript:;">规格包装</a></li>
                <li><a href="javascript:;">售后与保障</a></li>
                <li><a href="javascript:;">商品评价</a></li>
                <li><a href="javascript:;">手机社区</a></li>
              </ul>
              <!--内容-->
              <div class="tabContents">
                <div class="active">
                  <ul>
                    <li>分辨率：1920*1080(FHD)</li>
                    <li>后置摄像头：1200万像素</li>
                    <li>前置摄像头：500万像素</li>
                    <li>核 数：其他</li>
                    <li>频 率：以官网信息为准</li>
                    <li>品牌： Apple</li>
                    <li>商品名称：APPLEiPhone 6s Plus</li>
                    <li>商品编号：1861098</li>
                    <li>商品产地：中国大陆</li>
                    <li>商品毛重：0.51kg</li>
                    <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                    <li>系统：苹果（IOS）</li>
                    <li>像素：1000-1600万品毛重：0.51kg</li>
                    <li>机身内存：64GB</li>
                  </ul>
                  <img src="images/intro01.png" alt="">
                  <img src="images/intro02.png" alt="">
                  <img src="images/intro03.png" alt="">
                </div>
                <div>规格包装</div>
                <div>售后与保障</div>
                <div>商品评价</div>
                <div>手机社区</div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/data.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>